<template>
  <div>
    <v-row justify="center">
      <v-dialog v-model="dialog" persistent max-width="600px">
        <v-card>
          <v-card-title>
            <span class="headline">用户注册</span>
          </v-card-title>
          <v-card-text>
            <v-container>
              <v-row>
                <v-col cols="12">
                  <v-text-field
                    v-model="model.name"
                    label="用户名*"
                    required
                  ></v-text-field>
                </v-col>
                <v-col cols="12">
                  <v-text-field
                    v-model="model.password"
                    label="密码*"
                    :type="show1 ? 'text' : 'password'"
                  @click:append="show1 = !show1"
                  :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
                    required
                  ></v-text-field>
                </v-col>
              </v-row>
            </v-container>
            <small>*必填项</small>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="blue darken-1" text @click="close">关闭</v-btn>
            <v-btn color="blue darken-1" text @click="register">注册</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>
  </div>
</template>
<script>
export default {
  data: () => ({
    dialog: true,
    show1: false,
    model: {
      name: "",
      password: ""
    }
  }),
  methods: {
    close() {
      console.log(this.snackbar);
      this.$emit("close", false);

    },
    async register() {
      console.log(this.model);
      if(this.model.name === ""){
        this.$toast({
            text: "请填写用户名",
            type: "danger",
            duration: 3000
          });
          return;
      }
      if(this.model.password === ""){
        this.$toast({
            text: "请填写密码",
            type: "danger",
            duration: 3000
          });
          return;
      }
      const res = await this.$http.post("register/", this.model);
      console.log(res.data);
      if (res.data.error_num === 0) {
        this.$emit("register", true);
      }
      this.$emit("close", false);
    }
  }
};
</script>
